<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型水平居中(Box model horizontally centered)</title>
  <!-- 
    CSS的盒子模型中，水平居中（Horizontally Centered）是一种常见的布局技巧，可以使元素在父容器中水平居中显示。
    以下是实现水平居中的一些常用方法和技巧： 
 
      1. 使用margin属性： 
      - 设置左右外边距为auto，并且指定元素的宽度，可以实现元素在父容器中水平居中显示
        .element {
            width: 200px;
            margin: 0 auto;
        }
      2. 使用flexbox布局： 
      - 使用flexbox布局可以轻松实现元素的水平居中。将父容器设置为display: flex; 并且使用justify-content: center; 可以使其子元素水平居中。例如：
        .container {
            display: flex;
            justify-content: center;
        }
      3. 使用text-align属性： 
      - 将父容器的text-align属性设置为center，可以使内联元素水平居中显示。例如：
        .container {
            text-align: center;
        }
        .element {
            display: inline-block;
        }
   -->
   <style>
     body {
       margin: 0;
       padding: 0;
     }
     /* 使用margin属性 */
     .horizontally-centered-margin {
       width: 700px;
       height: 160px;
       background-color: skyblue;
     }

     .center-margin {
       width: 200px;
       height: 100px;
       background-color: salmon;
       margin: 0 auto;
     }

     /* 使用flexbox布局 */
     .horizontally-centered-flex {
       display: flex;
       justify-content: center;
       width: 700px;
       height: 160px;
       margin-top: 20px;
       background-color: skyblue;
     }
     .center-flex {
       width: 200px;
       height: 100px;
       background-color: salmon;
     }

     /* 使用text-align属性 */
     .horizontally-centered-inline-block {
       text-align: center;
       width: 700px;
       height: 160px;
       margin-top: 20px;
       background-color: skyblue;
     }
     .center-inline-block {
       display: inline-block;
       width: 200px;
       height: 100px;
       background-color: salmon;
     }
   </style>
</head>
<body>
  
  <div class="horizontally-centered-margin">
    <div class="center-margin"></div>
  </div>

  <div class="horizontally-centered-flex">
    <div class="center-flex"></div>
  </div>

  <div class="horizontally-centered-inline-block">
    <div class="center-inline-block"></div>
  </div>
  
</body>
</html>